<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.3.1.min.js"></script>
		<script src="js/shopcar.js"></script>
		<style>
			body {
				padding: 0;
				margin: 0;
				font-size: 12px;
				color: #666;
			}

			#main {
				width: 990px;
				margin: 60px auto;
			}
			
			#cart {
			}
			
			
			#guess {
				margin-top: 20px;
				height: 200px;
				background-color: gray;
			}

			#titleBar {
				height: 43px;
				line-height: 43px;
				background-color: #f3f3f3;
				margin-bottom: 16px;
			}

			.choose {
				padding-left: 10px;
				width: auto;
			}

			.goods {
				width: 208px;
			}

			.props {
				width: 170px;
			}

			.price {
				width: 240px;
			}

			.nums {
				width: 150px;

			}

			.action {
				width: 75px;

			}

			#titleBar div {
				float: left;
			}

			.shop {
				border-bottom: solid 1px #eee;
				/* margin-bottom: 30px; */
			}

			.shop .shopname {
				border-bottom: solid 2px #bbb;
				padding: 6px 0px 6px 6px;
				height: 30px;
			}

			.row {
				padding: 10px 0px 0px 0px;
				border-left: solid 1px #eee;
				border-right: solid 1px #eee;
				border-top: solid 1px #ccc;
				height: 100px;
			}

			.row>div {
				float: left;
			}

			.choose>.singlechoose {
				width: 30px;
				float: left;
			}

			.choose>.image {
				width: 90px;
				float: left;
			}

			.picture {
				width: 80px;
				height: 90px;
			}

			.footerBar {
				height: 50px;
				border: 1px solid #f0f0f0;
				background: #fff;
				position: relative;
				margin-bottom: 50px;
				line-height: 50px;
			}

			.selector {
				margin-left: 540px;
			}

			.btn-area {
				font-weight: 700;
				width: 94px;
				height: 52px;
				line-height: 52px;
				color: #fff;
				text-align: center;
				font-size: 18px;
				font-family: "Microsoft YaHei";
				background: #e54346;
				overflow: hidden;
			}

			.select-all {
				float: left;
				height: 18px;
				line-height: 18px;
				padding: 16px 0 16px 9px;
				white-space: nowrap;
			}

			.select-all input {
				vertical-align: middle;
				display: inline-block;
				margin-right: 5px;
			}

			.operation {
				float: left;
				width: 200px;
				margin-left: 40px;
			}

			.clear-all {
				font-weight: 700;
				margin: 0 20px;
			}

			.toolbar-right {
				float: right;
			}

			.amount-sum {
				float: left;
			}

			.amount-sum em {
				font-weight: 700;
				color: #E2231A;
				padding: 0 3px;
			}

			.price-sum {
				float: left;
				margin: 0 15px;
			}

			.price-sum em {
				font-size: 16px;
				color: #E2231A;
				font-weight: 700;
			}

			.numb {
				width: 30px;
				height: 17px;
				margin-right: 0%;
				position: relative;
			}

			.nums1 {
				float: left;
				margin-left: -20px;

			}

			.del {
				margin-left: 30px;
				margin-left: 90px;
			}

			#guess {
				height: 248px;
				width: 990px;
				margin: 60px auto;
				background-color: white;
			}

			.guessgoods {
				padding: 0px;
				list-style: none;
				display: flex;
			}

			.g1 .g2 .g3 .g4 {
				height: 248px;
				width: 307px;
			}

			.g1 {
				margin-left: 50px;
			}

			.one {
				display: flex;
				background-color: white;
				position: relative;
				 clip-path: inset(0);
			}

			button.left {
				position: absolute;
				left: 0;
				/* 距离左边距为 0，固定在左侧 */
				top: 50%;
				/* 垂直方向居中，后续可通过 transform 微调 */
				transform: translateY(-50%);
				/* 向上偏移自身高度的一半，实现精准垂直居中 */
				z-index: 1;
				/* 提高层级，确保在商品列表之上显示 */
			}

			button.right {
				position: absolute;
				right: 0;
				/* 距离右边距为 0，固定在右侧 */
				top: 50%;
				transform: translateY(-50%);
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="cart">
				<div id="titleBar">
					<div class="choose">
						<input type="checkbox" class="checkall" />全选
					</div>
					<div class="goods">商品</div>
					<div class="props">&nbsp;</div>
					<div class="price">单价</div>
					<div class="nums">数量</div>
					<div class="action">操作</div>
				</div>
			</div>
			<div class="footerBar">
				<div class="select-all">
					<input type="checkbox" name="" id="" class="checkall">全选
				</div>
				<div class="operation">
					<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
					<a href="javascript:;" class="clear-all">清理购物车</a>
				</div>
				<div class="toolbar-right">
					<div class="amount-sum">已经选<em>0</em>件商品</div>
					<div class="price-sum">总价:<em>￥0.00</em></div>
					<div class="btn-area">去结算</div>
				</div>
			</div>

			<!-- 				<div class="shop">
					<div class="shopname"><input type="checkbox" />箭牌糖果....</div>
					<div class="row">
						<div class="choose">
							<div class="singlechoose"><input type="checkbox" /></div>
							<div class="image"><img class="picture" src="images/1.jpg" /></div>
						</div>
						<div class="goods">商品</div>
						<div class="props">
							<div>a</div>
							<div>b</div>
						</div>
						<div class="price">1000</div>
						<div class="nums">10</div>
						<div class="action">删除</div>
					</div>
				</div> -->
		</div>
		<div id="guess">
			<h3>猜你喜欢 </h3>
			<div class="guess-container">
				<div class="one">
					<button class="left">
						< </button>
							<ul class="guessgoods guess-scroll">
								<li class="g1">
									<img src="img/a.jpg">
									<p class="desc"> vivo S20 大电池学生直屏 5000万防畸变柔光自拍 拍照 AI 手机</p>
									<p class="msg">12GB+256GB 凤羽金 6500mAh超薄长续航</p>
									<p class="price">7999</p>
									<a href="javascript:void(0)" class="buy" data-pid="p001">购买</a>
								</li>
								<li class="g2">
									<img src="img/b.jpg">
									<p class="desc">INSTAX富士拍立得 mini相纸 </p>
									<p class="msg">20张 mini12</p>
									<p class="price">7899</p>
									<a href="javascript:void(0)" class="buy" data-pid="p002">购买</a>
								</li>
								<li class="g3">
									<img src="img/c.jpg">
									<p class="desc">富士数模一体拍立得打印机</p>
									<p class="msg">3英寸相纸 抹茶绿</p>
									<p class="price">6799</p>
									<a href="javascript:void(0)" class="buy" data-pid="p003">购买</a>
								</li>
								<li class="g4">
									<img src="img/d.jpg">
									<p class="desc">INSTAX富士拍立得相机mini12</p>
									<p class="msg">白色</p>
									<p class="price">4899</p>
									<a href="javascript:void(0)" class="buy" data-pid="p004">购买</a>
								</li>
							</ul>
							<button class="right"> > </button>
				</div>
			</div>
		</div>

	</body>
</html>
<script>
	var arr = [{
			shopname: "oneone",
			goods: [{
					url: "images/1.jpg",
					name: "纪衣恋复古水洗做旧牛仔裤女秋冬直筒宽松显瘦垂感冬季女裤子",
					price: 168,
					msg: ["复古蓝", "加长", "xs"],
					max: 5
				},
				{
					url: "images/2.jpg",
					name: "MOKEN慢可白玫瑰珍珠项链纯银项链女高级小众轻奢设计送女生礼物",
					price: 138,
					msg: ["白玫瑰", "白金色"],
					max: 8
				}
			]
		},
		{
			shopname: "twotwo",
			goods: [{
					url: "images/3.jpg",
					name: "Torriden桃瑞丹玻尿酸积雪草凉感湿敷棉片",
					price: 119,
					msg: ["白色"],
					max: 6
				},
				{
					url: "images/4.jpg",
					name: "DABASES/丹倍诗S7电动牙刷成人男女充电式全自动声波套装学生",
					price: 209,
					msg: ["月光白", "2个刷头"],
					max: 2
				}
			]
		}
	];

	var str = "";
	$.each(arr, function(i, item) {
		str += "<div class='shop'>";
		//店名开始
		str += "<div class='shopname'>";
		str += "<input type='checkbox'/>";
		str += item.shopname;
		str += "</div>";
		//店名结束

		//商品列表开始
		$.each(item.goods, function(i, item) {
			str += "<div class='row' data-max='" + item.max + "'>";

			str += "<div class=choose>";
			str += "<div class=singlechoose><input type=checkbox s/></div>";
			str += "<div class=image><img class=picture src='" + item.url + "' /></div>";
			str += "</div>";

			str += "<div class=goods>" + item.name + "</div>";
			str += "<div class=props>";

			$.each(item.msg, function(i, item) {
				str += "<div>" + item + "</div>";
			});

			str += "</div>";

			str += "<div class=price>" + "￥" + item.price + "</div>";
			str += "<div class=all>"
			str += "<div class=nums1><button class='minus'>-</button>"
			str += "<input class='numb' type='text' value='1'/></div>"
			str += "<button class='add'>+</button></div>"
			str += "<div class=del>删除</div>";
			str += "</div>";

			str += "</div>";
		});

		//商品列表结束

		str += "</div>";
	});

	$("#cart").append($(str));
</script>